<template>
  <div>
    <el-echarts theme="macarons" :height="400" :option="option" :loading="loading"></el-echarts>

    <table
      class="table table-bordered text-center table-sm"
      v-if="eleFee.length"
      v-loading="loading"
    >
      <tbody>
        <tr>
          <td>年月</td>
          <td class="text-right">电费</td>
          <td class="text-right">电量</td>
        </tr>
        <tr v-for="(fee, j) in eleFee" :key="`fee-${j}`">
          <td>{{ fee.ele_date }}</td>
          <td class="text-right">{{ fee.ele_fee }}</td>
          <td class="text-right">{{ fee.ele_amount }}</td>
        </tr>
      </tbody>
    </table>

    <p class="text-center text-muted" v-else>
      <span v-show="!loading">暂无用电信息</span>
    </p>
  </div>
</template>

<script>
import { echartsXFormatter } from '@vimi/utils-tool'

export default {
  components: {},
  props: {
    eleId: String,
  },
  data() {
    return {
      loading: false,
      params: {
        'credit_ele_table_id.eq': '',
      },
      tableName: 'datum_customer_ele_fee',
      order: { ele_date: 'desc' },
      eleFee: [],
      option: {},
    }
  },
  computed: {},
  watch: {
    eleId: {
      handler: function () {
        this.getData()
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    async getData() {
      if (!this.eleId) return
      this.params['credit_ele_table_id.eq'] = this.eleId

      this.loading = true
      const [res] = await this.$utils.promise(
        this.$api.getData(this.$serviceName, this.tableName, this.params, this.order)
      )
      this.loading = false

      this.eleFee = (res && res.data) || []
      this.setOption()
    },
    setOption() {
      const xData = []
      const aData = []
      const ascData = [...this.eleFee]
      ascData.sort((a, b) => (a.ele_date > b.ele_date ? 1 : -1))
      for (let t of ascData) {
        xData.push(t.ele_date)
        const nowFee = Number.parseFloat(t.ele_fee) || 0
        aData.push(nowFee)
        // const compare = Number.parseFloat(t.fee_compare.replace(/(.*)%$/, '$1'))
        // const lastFee = isNaN(compare) ? '-' : Math.round(nowFee / (1 + compare / 100)) * 100 / 100
        // bData.push(lastFee)
      }

      this.option = {
        title: {
          text: '电费明细',
          subtext: '',
          left: 'center',
        },
        tooltip: {
          trigger: 'axis',
          formatter: '{b} <br/>{a} : {c}元',
        },
        legend: {
          top: 32,
          data: ['电费'],
        },
        xAxis: [
          {
            type: 'category',
            data: xData,
            axisLabel: {
              formatter: v => echartsXFormatter(v, 6),
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '电费使用（元）',
          },
        ],
        series: [
          {
            name: '电费',
            type: 'line',
            data: aData,
          },
        ],
      }
    },
  },
}
</script>
<style lang="scss" scoped></style>
